<template>
	<div id="home">
		<el-container>
		  <el-header>
		  	<div id="logo"></div>
		  	<el-button type="danger" style="width: 40px;height:40px;margin-right:5px"
		  		round
		  		size="mini"
		  		@click="login">
		  		<i class="fa fa-sign-out"></i>
		  	</el-button>
		  </el-header>
		  <el-container>
		    <el-aside width="200px">
		    	<!--用一个子组件写左边菜单栏内容-->
		    	<nav-menu></nav-menu>
		    </el-aside>
		    <el-main>
		    	<router-view></router-view>
		    </el-main>
		  </el-container>
		</el-container>
	</div>
</template>
<script>
//导入子组件模块，左菜单栏内容
import navMenu from './navMenu'
	export default{
		components:{navMenu},
		methods:{
			login(){
				//退出登录，并返回登陆界面
				//封装方法
				 var action=()=>{
					localStorage.clear();
					this.$router.push('/signin');
				}
				//调用operatorConfirm传要执行的操作
				this.operatorConfirm(action,'退出');
			}
		}
	}
</script>
<style lang="scss" scoped>
	#home{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.el-header{
    background-color: #B3C0D1;
    color: #333;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;

  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

  }
  
   .el-container {
    /*margin-bottom: 40px;*/
    height: 100%;
    }
    .fa-sign-out{
    	font-size: 18px;
  }
</style>